<template>
  <div class="app-container">
    <el-card
      style="margin-bottom: 20px; height: 150px; width: 100%; background: #f2f3ff; box-shadow: 0px 4px 15.8px 0px #00000033; border-radius: 15px"
    >
      <div class="title">工程概况</div>
      <div class="basic">
        <div class="basicinfo">
          <span>工程名称：</span>
          <span>{{ planteInfo?.title }}</span>
        </div>
        <div class="basicinfo">
          <span>工程概述：</span>
          <span>{{ planteInfo?.basicInfo }}</span>
        </div>
        <div class="basicinfo">
          <span>建筑面积：</span>
          <span>{{ planteInfo?.buildArea }} 平方米</span>
        </div>
      </div>
    </el-card>
    <div class="deviceTop">
      <div class="deviceInfo">
        <div class="deviceList">
          <img class="img" src="@/assets/images/online.png" alt="pg" />
          <div class="val">
            <div class="number">{{ deviceList.onlineNum }}</div>
            <div class="label">在线设备总数</div>
          </div>
        </div>
        <div class="deviceList">
          <img class="img" src="@/assets/images/alarm.png" alt="pg" />
          <div class="val">
            <div class="number">{{ deviceList.todayAlarmNum }}</div>
            <div class="label">今日报警次数</div>
          </div>
        </div>
      </div>
      <div class="devicealarm">
        <div class="devicealarmallnum">
          <div class="devicealarmTitle">故障设备总数</div>
          <div class="numbers">
            <div class="numbers-level" v-for="(item, index) in deviceList.malfunctionNumList" :key="index">
              <div class="levelnum">
                {{ item.num }}
              </div>
              <div class="leveltit">
                {{ getLevel(item.level) }}
              </div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical" />
        <div class="devicealarmallnum">
          <div class="devicealarmTitle">报警等待确认数</div>
          <div class="numbers confirm">{{ deviceList.alarmWaitConfirmNum }}</div>
        </div>
      </div>
    </div>
    <div class="deviceBot">
      <div class="scrollTable">
        <div class="title">设备报警信息</div>
        <div class="cell">
          <div>设备名</div>
          <div>故障类型</div>
          <div>时间</div>
          <div>故障等级</div>
        </div>
        <Vue3SeamlessScroll :hover-stop="true" :list="dataGroupList" :wheel="true" :hover="true" :step="1" :limitScrollNum="4" class="scroll">
          <div v-for="(item, index) in dataGroupList" :key="index" class="items">
            <div><span class="doll"></span>{{ item.deviceName }}</div>
            <div>{{ item.faultDescription }}</div>
            <div>{{ item.alarmTime }}</div>
            <div :class="item.faultLevel === 1 ? 'warn' : 'error'">{{ getLevel(item.faultLevel) }}</div>
          </div>
        </Vue3SeamlessScroll>
      </div>
      <div class="devicecharts">
        <div class="title">
          <div>设备运行状态</div>
          <div>
            <el-select v-model="device_type" placeholder="请选择设备类型" size="large" @change="changeDeviceType" style="width: 240px">
              <el-option v-for="item in dictsList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </div>
        </div>
        <div class="echarts">
          <PieEcharts title="健康指数" :datas="distributionData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import PieEcharts from '@/components/PieEcharts';
import { pageStatistics, pageRecentAlarm, pageDistribution } from '@/api/home/index';
import { getDicts } from '@/api/system/dict/data';
import { listProjectConfig } from '@/api/device/projectConfig';
const dataGroupList = ref<any[]>([]);
// 在线设备总数、故障设备总数（按等级区分）、今日报警次数
const deviceList = ref({
  onlineNum: 0,
  todayAlarmNum: 0,
  alarmWaitConfirmNum: 0,
  malfunctionNumList: [
    { level: 1, num: 0 },
    { level: 2, num: 0 },
    { level: 3, num: 0 }
  ]
});

const distributionData = ref<any[]>([
  { value: 0, name: '未连接', key: 0 },
  { value: 0, name: '运行中', key: 1 },
  { value: 0, name: '停止', key: 2 },
  { value: 0, name: '故障', key: 3 }
]);

const dictsList = ref([]);

const device_type = ref();

const planteInfo = ref();

const getpageStatistics = async () => {
  const { data } = await pageStatistics();
  deviceList.value = data;
};

const getLevel = (level: number) => {
  switch (level) {
    case 1:
      return '一般';
    case 2:
      return '严重';
    case 3:
      return '紧急';
    default:
      return '紧急';
  }
};

const getpageRecentAlarm = async () => {
  const { data } = await pageRecentAlarm();
  dataGroupList.value = data as any;
};

const getpageDistribution = async () => {
  const { data } = await pageDistribution({ type: device_type.value });
  distributionData.value = distributionData.value.map((e) => {
    const item = data.find((i) => i.type == e.key);
    e.value = item.num;
    return e;
  });
};

const changeDeviceType = (e) => {
  getpageDistribution();
};

const getGetDicts = async () => {
  const { data } = await getDicts('bs_device_type');
  dictsList.value = data;
  device_type.value = data[0].dictValue;
};

const getlistProjectConfig = async () => {
  const { rows } = await listProjectConfig({ pageNum: 1, pageSize: 10 });
  planteInfo.value = rows[0];
};

onMounted(async () => {
  await getlistProjectConfig();
  await getGetDicts();
  await getpageStatistics();
  await getpageRecentAlarm();
  await getpageDistribution();
});
</script>

<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px 24px;

  .title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
    height: 50px;
  }

  .basic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    .basicinfo {
      width: calc(33.3% - 10px);
      height: 100%;
      font-size: 24px;
      color: #333333;
      text-align: center;
      span {
        margin-right: 10px;
        font-weight: bold;
      }
    }
  }

  .deviceTop {
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .deviceInfo {
      height: 100%;
      width: calc(50% - 10px);
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .deviceList {
        width: calc(100% / 2 - 20px);
        height: 100%;
        margin: 0 10px;
        background: linear-gradient(270deg, #f2f3ff 0%, #d8ddff 99.9%);
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 30px;
        font-size: 20px;
        .img {
          width: 120px;
          height: 90px;
          margin-right: 10%;
        }
        .val {
          .number {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 60px;
            margin-bottom: 10px;
          }

          .numbers {
            margin-bottom: 10px;
            .numbers-level {
              margin-bottom: 5px;
              .num {
                font-size: 25px;
              }
            }
          }
        }
      }
    }
    .devicealarm {
      box-sizing: border-box;
      background: linear-gradient(270deg, #f2f3ff 0%, #d8ddff 99.9%);
      flex: 1;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0px 4px 15.8px 0px #00000033;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .devicealarmallnum {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        padding: 10px 24px;
        .devicealarmTitle {
          height: 30px;
          line-height: 30px;
          font-size: 20px;
          font-weight: bold;
          text-align: center;
        }

        .numbers {
          height: calc(100% - 30px);
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 20px;
          .numbers-level {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .levelnum {
              font-size: 30px;
              font-weight: bold;
            }
            .leveltit {
              margin-top: 5px;
            }
          }
        }

        .confirm {
          font-size: 40px;
          font-weight: bold;
          color: #ff4040;
        }
      }
    }
  }
  .deviceBot {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: calc(100% - 220px);
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 24px;
      font-weight: bold;
      font-size: 18px;
      border-bottom: 1px solid #eeeeee;
      margin-bottom: 10px;
    }
    .scrollTable {
      box-sizing: border-box;
      box-shadow: 0px 4px 15.8px 0px #00000033;
      border-radius: 15px;
      height: 600px;
      width: calc(50% - 20px);
      position: relative;
      .cell {
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 50px;
        left: 10px;
        z-index: 9;
        background: linear-gradient(270deg, #f2f3ff 0%, #d8ddff 99.9%);
        font-size: 18px;
        font-weight: bold;
        border-radius: 5px;
        div {
          width: calc(100% / 4);
          text-align: center;
        }
      }
      .scroll {
        width: 100%;
        padding: 10px 12px;
        height: calc(100% - 60px);
        overflow: hidden;
        .items {
          width: 100%;
          height: 70px;
          cursor: pointer;
          margin: 10px 5px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 16px;
          box-shadow: 0px 3px 4px 0px #00000033;
          div {
            width: calc(100% / 4);
            text-align: center;
          }
          .doll {
            width: 6px;
            height: 6px;
          }

          .warn {
            color: #ff922e;
            font-weight: bold;
          }

          .error {
            color: #ff4040;
            font-weight: bold;
          }
        }
      }
    }
    .devicecharts {
      border-radius: 15px;
      box-shadow: 0px 4px 15.8px 0px #00000033;
      height: 600px;
      width: calc(50% - 20px);
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
      }
      .echarts {
        width: 100%;
        height: calc(600px - 60px);
      }
    }
  }
}
</style>
